<template>
	<!-- 没有token不显示页面，并跳转去登录页面 -->
	<view v-if="token">
		<view style="padding-left: 20rpx; padding-right: 20rpx">
			<!-- 官方消息 -->
			<view class="officialbox">
				<view class="show">官方信息</view>
				<view class="items official" v-for="(item, index) in officialList" :key="index">
					<!-- 官方头像 -->
					<view class="avatar official">
						<image v-bind:src="item.imgPath" mode="widthFix"></image>
					</view>
					<view class="messages">
						<!-- 官方昵称和时间 -->
						<view class="data">
							<!-- 官方昵称 -->
							<view class="name">{{ item.offname }}</view>
							<!-- 聊天时间 -->
							<view class="time">{{ item.offtime | date }}</view>
						</view>
						<!-- 官方消息内容 -->
						<view class="contents official">{{ item.offContent }}</view>
					</view>
				</view>
			</view>

			<!-- 聊天 -->
			<view class="chatbox">
				<view class="show">聊天</view>
				<!-- 客户头像 -->
				<view class="items chat" v-for="(item, index) in chatList" :key="index" @click="gotoCom(item)">
					<view class="avatar chat">
						<image v-bind:src="item.imgPath" mode="widthFix"></image>
					</view>
					<view class="messages">
						<!-- 官方昵称和时间 -->
						<view class="data">
							<!-- 客户昵称 -->
							<view class="name">{{ item.chatname }}</view>
							<!-- 聊天时间 -->
							<view class="time">{{ item.chattime | date }}</view>
						</view>
						<!-- 客户消息内容 -->
						<view class="contents chat">{{ item.chatContent }}</view>
					</view>
				</view>
			</view>
		</view>
		<popup></popup>
		<tabbar :tab="3"></tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			officialList: [
				{
					offContent: '暂无公告消息',
					recordId: 0,
					titleId: 0,
					userId: 0,
					offtime: Date.now(Number),
					imgPath: '/static/page1.jpg',
					offname: '公告信息'
				},
				{
					offContent: '暂无系统通知',
					recordId: 0,
					titleId: 0,
					userId: 1,
					offtime: Date.now(Number),
					imgPath: '/static/page1.jpg',
					offname: '系统通知'
				}
			],
			chatList: [
				{
					chatContent: '结果怎么样了',
					recordId: 0,
					titleId: 0,
					userId: 0,
					chattime: Date.now(Number),
					imgPath: '/static/page1.jpg',
					chatname: '张老板'
				},
				{
					chatContent: '结果怎么样了',
					recordId: 0,
					titleId: 0,
					userId: 1,
					chattime: Date.now(Number),
					imgPath: '/static/page1.jpg',
					chatname: '张老板'
				}
			]
		};
	},
	onShow() {
		// 无token，提示用户，并跳转页面
		if (!this.token) {
			uni.$showMsg('请登录！', 1500);
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/my/my'
				});
			}, 1500);
		}
	},

	methods: {
		gotoCom(item) {
			uni.navigateTo({
				url: '/subpkg/communicate/communicate?userId=' + item.userId
			});
		}
	},
	computed: {
		// vuex中的token
		...mapState(['token'])
	}
};
</script>

<style lang="scss">
.officialbox,
.chatbox {
	padding-top: 40rpx;
	align-items: center;
}
.show {
	padding-bottom: 40rpx;
	font-size: 36rpx;
}
.items {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 200rpx;
	border: 2rpx solid #efefef;
	padding-left: 30rpx;
	.avatar {
		display: flex;
		justify-content: center;
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		overflow: hidden;
		image {
			align-items: center;
		}
	}
	.messages {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;

		.data {
			display: flex;
			justify-content: space-between;
			.name {
				padding-bottom: 40rpx;
				font-size: 40rpx;
			}
			.time {
				padding-right: 10rpx;
				padding-bottom: 50rpx;
				font-size: 28rpx;
			}
		}

		.contents {
			color: #9a9a9a;
			font-size: 28rpx;
		}
	}
}
</style>
